<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="username"></div>
    <div id="userage"></div>
    <div id="userId"></div>
    <div id="arr1"></div>
    <div id="app">{{count}}</div>
    <!-- vue 团队的vue -->
    <!-- <script src="../node_modules/vue/dist/vue.js"></script> -->
    <!-- 模拟的 -->
    <script src="../dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app', // 选择器，可以在对应的元素内使用vue
        data() {
          console.log(this)
          return {
            count: 10
          }
        },
        computed: {}
      })
      // console.log(vm.$options)

      const obj = {
        age: 19,
        user: {
          id: 10
        },
        arr1: [1, 2, 3]
      }

      console.log(obj)

      function observe(data) {
        Object.keys(data).forEach(key => {
          let value = data[key]

          if (typeof value === 'object') {
            return observe(value)
          }
          Object.defineProperty(data, key, {
            get() {
              // console.log('读name了')
              return value
            },
            set(val) {
              // console.log('改name了', val)

              value = val
              username.innerHTML = obj.name
              userage.innerHTML = obj.age
              userId.innerHTML = obj.user.id
              // console.log(obj.arr1)
              arr1.innerHTML = obj.arr1[0]
            }
          })
        })
        // for (let key in data) {

        // }
      }

      observe(obj)

      username.innerHTML = obj.name
      userage.innerHTML = obj.age
      userId.innerHTML = obj.user.id
      arr1.innerHTML = obj.arr1[0]

      console.log(obj.name)
    </script>
  </body>
</html>
